<script lang="ts" setup>
import {ref} from 'vue'

const text = ref('aa')
const user = ref('李四')
const message = ref('')

const checked = ref(true)

//兴趣爱好
const loves = ref(['音乐', 'vue3', 'html5', 'css3', 'ts'])
const love = ref(['音乐', 'ts'])

//单选扭
const gender = ref('保密')

const selected = ref('A')


const scity = ref(['zz', 'sh'])

const options = ref([
  {text: '郑州', value: 'zz'},
  {text: '北京', value: 'bj'},
  {text: '上海', value: 'sh'},
  {text: '洛阳', value: 'ly'},
  {text: '开封', value: 'kf'},
])

const username = ref('admin')
</script>

<template>
  <input v-model.trim="username" @input="console.log(username)">
  <br><br>
  <select v-model="scity" multiple size="10">
    <option v-for="option in options" :value="option.value">
      {{ option.text }}
    </option>
  </select>
  <div>Selected: {{ scity }}</div>
  <br><br>

  <div>Selected: {{ selected }}</div>
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br><br>
  选择性别：{{ gender }}<br>
  <label><input type="radio" v-model="gender" value="男">男</label>
  <label><input type="radio" v-model="gender" value="女">女</label>
  <label><input type="radio" v-model="gender" value="保密">保密</label>

  <hr>
  <button @click="love = loves">全选</button>
  <button @click="love=loves.filter(e=>!love.includes(e))">反选</button>
  <button @click="love=[]">取消</button>
  <button @click="love=[]">删除</button>
  <hr>

  请选择你喜欢：{{ love }}<br>
  <label v-for="item in loves">
    <input v-model="love" :value="item" type="checkbox">{{ item }}
  </label>
  <hr>
  <label> <input v-model="checked" type="checkbox"> {{ checked ? '选中' : '未选中' }}</label>
  <hr>
  <input :value="text" @input="event=>text=event.target.value">
  <br>
  <p>{{ text }}</p>
  <hr>
  <input v-model="user" placeholder="请输入姓名">
  <p>{{ user }}</p>
  <p>Message is: {{ message }}</p>
  <input v-model="message" placeholder="edit me"/>
</template>

<style scoped>

</style>
